
ul#menu {
width:99%;
height:38px;
background:url(../images/bg-navigation.png) repeat-x;
list-style:none;
margin-bottom:8px;
padding:0;
border: solid #ffffff 5px;
}

ul#menu li {
float:left;
}

ul#menu li a {
background:url(../images/bg-navigation.png) no-repeat scroll top left;
display:block;
height:38px;
position:relative;
}

ul#menu li a.cars {
width:70px;
}
ul#menu li a.shop {
width:126px;
background-position:-70px 0px;
}

ul#menu li a.checkout{
width:96px;
background-position:-196px 0px;
}

ul#menu li a.howto{
width:140px;
background-position:-292px 0px;
}

ul#menu li a.about {
width:76px;
background-position:-432px 0px;
}

ul#menu li a.forum {
width:79px;
background-position:-508px 0px;
}
ul#menu li a.contact {
width:104px;
background-position:-587px 0px;
}

ul#menu li a span {
background:url(../images/bg-navigation.png) no-repeat scroll bottom left;
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:100;
}

ul#menu li a.cars span {
background-position:0px -38px;
}
ul#menu li a.shop span {
background-position:-70px -38px;
}

ul#menu li a.checkout span {
background-position:-196px -38px;
}

ul#menu li a.howto span {
background-position:-292px -38px;
}

ul#menu li a.about span {
background-position:-432px -38px;
}

ul#menu li a.forum span {
background-position:-508px -38px;
}

ul#menu li a.contact span {
background-position:-587px -38px;
}

ul#menu li a span:hover {
cursor:pointer;
}

/*1st sub level menu*/
ul#menu li ul {
	position: absolute;
	left: 0;
	padding: 0px 0 0;
	display: none; /*collapse all sub menus to begin with*/
	visibility: hidden;
	background: #313131;
	border-bottom: 1px solid #000
}

/*Sub level menu list items (undo style from Top level List Items)*/
ul#menu li ul li{
display: list-item;
float: none;
list-style-type: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
ul#menu li ul li ul{
top: 0;
}

/* Sub level menu links style */
ul#menu li ul li a{
	font-weight: 400;
	width: 58px; /*width of sub menus*/
	height: 30px;
	padding: 0 19px;
	line-height: 30px;
	font-size: 11px;	
	text-align: left;
	background: none;
	color: #ccc;
	border-bottom: 1px solid #444;
	border-top: 1px solid #222;
}

ul#menu li ul li a.selected, .ddsmoothmenu ul li ul li a:hover {
	color: #fff;
	background: #222;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/


/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
}

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.5;
}

/*Top level list items*/
ul#menu li{
	position: relative;
	display: inline;
	float: left;
	
}

/*Top level menu link items style*/
ul#menu li a {
	display: block;
	line-height: 53px;
	text-align: center;
	text-decoration: none;
	
}

ul#menu li a span {
display:block;
position:absolute;
top:0;
left:0px;
z-index:100;
}

* html ul#menu li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

ul#menu li ul li a.selected, ul#menu li ul li a:hover {
	color: #fff;
	background: #222;
}
